<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
	pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Job Search</title>

<link rel="stylesheet"
	href="http://cdn.bootcss.com/bootstrap/3.2.0/css/bootstrap.min.css">

<style type="text/css">
body {
	font-family: Verdana;
	font-size: 14px;
	margin: 0;
}

#container {
	margin: 0 auto;
	width: 100%;
}

#header {
	height: 60px;
	background: #444444;
}

#mainContent {
	height: 590px;
	background: #00DDDD;
}

#footer {
	height: 20px;
	background: #9c6;
}

#btn1 {
	width: 80px;
}

#btn2 {
	width: 80px;
}

#registe {
	margin-left: 1000px;
}

table {
	width: 350px;
	margin-left: 750px;
	margin-top: 50px;
	background: #FFFFFF;
	text-align: center;
}

table td, table th {
	padding-bottom: 10px;
	padding-left: 10px;
	padding-right: 10px;
	padding-top: 10px;
}

#tt{
margin-left:30px;
}

</style>


<script type="text/javascript">
	var req;
	function ajaxCall() {
		var poststr = "username=" + encodeURI(document.login.id.value);
		var poststr1 = "&password=" + encodeURI(document.login.password.value);
		var url = "Login";

		//checking browser type and creating XMLHttpRequest accordingly
		if (window.XMLHttpRequest) {
			req = new XMLHttpRequest();
		} else if (window.ActiveXObject) {
			req = new ActiveXObject("Microsoft.XMLHTTP"); //For old IE(ie6 or early)
		}

		req.open("POST", url, true);
		req.onreadystatechange = callback;
		req.setRequestHeader("Content-Type",
				"application/x-www-form-urlencoded");
		req
				.setRequestHeader("Content-length", poststr.length
						+ poststr1.length);
		req.setRequestHeader("Connection", "close");
		req.send(poststr + poststr1);
	}
	function callback() {
		if (req.readyState == 4) {
			if (req.status == 200) {
				// update the HTML DOM based on whether or not message is valid
				parseMessage();
			}
		}
	}
	function parseMessage() {
		var message = req.responseText;
		setMessage(message);
	}
	function setMessage(message) {
		mdiv = document.getElementById("Message");
		if (message == 'usernameOrpassword') {
			mdiv.innerHTML = "<div style=\"color:red\">"
					+ "uername or password wrong" + "</ div>";
		} else if (message == 'employee') {
			window.location = "employee.jsp";
		} else if (message == 'employer') {
			window.location = "employer.jsp";
		}
	}
</script>


</head>
<body>
	<div id="container">
		<div id="header">
			<font color="FFFFFF">welcome to job search</font>
		</div>
		<div id="mainContent">
			<form class="form-horizontal" action="Login" name="login">
				<div id="registe">

					<a href='employeeRegister.jsp'><input class="btn btn-default"
						type="button" id="n1" value="Search Job Registe"></a> 
					<a href='employerRegister.jsp'><input class="btn btn-default"
						type="button" id="n2" value="provide Job Registe"></a> 
						
				</div>

				<div class="page-header" id="tt">
					<h1>Begin Job Searching!</h1>
				</div>

				<table id="loginblock" class="table" style="width:500px">
					<tr>
						<div style="text-align:center"><th>Login</th></div>
					</tr>
					<tr>
						<td><label for="inputPassword" class="col-sm-2 control-label">Username</label></td>
						<td>
							<div class="col-sm-10" class="col-xs-3">
								<input class="form-control" type="text" name="id">
							</div>
						</td>
						<td>
							<div id="usernameEmpty"></div>
						</td>
					</tr>
					<tr>
						<td><label for="inputPassword" class="col-sm-2 control-label">Password</label></td>
						<td>
							<div class="col-sm-10" class="col-xs-3">
								<input class="form-control" type="password" name="password">
							</div>
							<div id="passwordEmpty"></div>
						</td>

					</tr>
					<tr>
						<th>
							<div id="Message" style="text-align:center"></div>
						</th>
					</tr>
					<tr>
						<td><input class="btn btn-primary" type="button" id="btn1"
							value="login" onClick="javascript:ajaxCall()"></td>
						<td><input class="btn btn-primary" type="reset" id="btn2"
							value="clear"></td>
					</tr>
				</table>
			</form>
		</div>
		<div id="footer">This is the footer</div>
	</div>
</body>
</html>